<template>
  <div class="container">
    <el-form class="flex" label-position="left" ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">

      <div class="flex flex-col">
        <el-checkbox class="w-[200px] bg-[#f7f7f7]
        px-2 py-1 border-[1px] border-gray-200 !mr-0 !font-bold" v-model="form.uploadCenter"  :true-label="1" :false-label="0">常规联动</el-checkbox >
        <div class="h-[200px] px-2 py-1 border-[1px] border-gray-200 ">
          <el-checkbox  v-model="form.uploadCenter" :true-label="1" :false-label="0" label="1">上传中心</el-checkbox >
        </div>
<!--        <el-button class="!mt-8" type="primary" @click="save" style="margin-left: 0px; width: 120px">保存</el-button>-->

      </div>
      <div class="flex flex-col">
        <el-checkbox class="w-[200px] bg-[#f7f7f7]
        px-2 py-1 border-[1px] border-gray-200 !mr-0 !font-bold" v-model="isAll"
                     :true-label="1" :false-label="0" @change="handleChange">联动报警输出</el-checkbox >
        <div class="h-[200px] px-2 py-1 border-[1px] border-gray-200 ">
            <el-checkbox v-for="item in form.linkage" :key="item.portNo" v-model="item.output"
                         :label="'A->' + item.portNo" :true-label="1" :false-label="0"></el-checkbox>
        </div>

      </div>

      <div>

      </div>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'index',
  components: {},
  props: {
    para: {
      type: Object,
      default: () => {
        return {
          uploadCenter: 0,
          "linkage": [
            {"portNo": 1, "output": 0,},
            {"portNo": 2, "output": 0,},
          ]
        }
      }
    }
  },
  watch: {
    // 监听 para 的变化，更新 form 数据
    para: {
      handler(newVal) {
        this.form.uploadCenter = newVal.uploadCenter;
        this.form.linkage = JSON.parse(JSON.stringify(newVal.linkage || []));
        // 更新“全选”状态
        this.updateIsAllState();
      },
      deep: true, // 深度监听，确保对对象和数组的变化都能响应
    },
    'form.linkage': {
      // 当 linkage 数组内部发生变化时执行
      handler() {
        // 如果子选项不是全部选中，则取消“全选”的选中状态
        this.updateIsAllState();
      },
      deep: true // 必须设置 deep 为 true，才能监听到数组内对象属性的变化
    }
  },
  created() {
    // 从 prop 初始化表单数据，使用深拷贝以避免直接修改 prop
    this.form = {
      uploadCenter: this.para.uploadCenter,
      linkage: JSON.parse(JSON.stringify(this.para.linkage || [])),
    };
    // 组件创建时，根据初始数据更新“全选”复选框的状态
    this.updateIsAllState();
  },
  data() {
    return {
      title: "",
      open: false,
      isAll: 0, // "全选"状态，将在 created 钩子中被正确初始化
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        uploadCenter: 0,
        linkage: [] // 在 created 钩子中从 prop 初始化
      },
      rules: {},
    }
  },
  methods: {
    // “全选”复选框的 change 事件
    handleChange() {
      if (this.isAll == 1) {
        this.form.linkage.forEach(item => {
          item.output = 1; // 全部选中
        });
      } else {
        this.form.linkage.forEach(item => {
          item.output = 0; // 全部取消
        });
      }
    },
    // --- 新增：辅助方法，用于更新“全选”状态 ---
    updateIsAllState() {
      if (this.form.linkage && this.form.linkage.length > 0) {
        // 使用 every 方法检查是否所有子项的 output 都为 1
        const allSelected = this.form.linkage.every(item => item.output === 1);
        this.isAll = allSelected ? 1 : 0;
      } else {
        // 如果没有子项，则“全选”为未选中状态
        this.isAll = 0;
      }
    }
  }
}
</script>

<style scoped>
.container {
//margin-left: 15%;
//margin-top: 5%;
}
.week-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  flex-direction: row;
}

.day-schedule {
  flex: 0 0 35%; /* Each .day-schedule will try to take up half the width of its container */
  max-width: 50%; /* Ensures that the .day-schedule does not exceed half the width */
  box-sizing: border-box;
}

.block {
  display: flex;
  margin-top: 10px;
}

@media (max-width: 600px) { /* Adjust the breakpoint as needed */
  .day-schedule {
    flex: 0 0 100%; /* On smaller screens, the .day-schedule will take the full width */
    max-width: 100%;
  }
}
.button {
  margin-left: 15%;
}
.el-form-item .el-form-item {
  margin-bottom: 10px;
}
select {
  width: 202px;
}


.title  {
  background-color: #F2F2F2;
  font-weight: 700;
  margin-top: 10px;
}

.title {
  background-color: #F2F2F2;
  font-weight: 700;
  padding-left: 15px;
  margin-top: 10px;
  margin-bottom: 5px;
}
.title {
  height: 30px;
  line-height: 30px;
}
.el-checkbox {
  margin-bottom: 10px;
  display: block !important;
}
</style>
